<template>
	<view class="content">
		<view class="nav">
			<uni-nav-bar title="个人主页" backgroundColor="transparent" left-icon="left" @clickLeft="goback">
				<block slot="right">
					<text @click="lookhomePage">浏览主页</text>
				</block>
			</uni-nav-bar>
		</view>
		<view id="flexGird" ref="flexGird">
			<image :src="homePage" v-if="homePage"></image>
			<view class="skeleton" v-else>
				<text></text>
			</view>
		</view>


		<view class="btnbox flex_r_between">
			<!-- <view class="btn btn1" @click="renderScript.onClick">分享海报</view>
			<view class="btn btn2" @click="renderScript.onClick">分享我的主页</view> -->
			<view class="btn btn1" @click="onShare">分享海报</view>
			<view class="btn btn2" @click="upDateImg">重新生成</view>
		</view>

		<!-- <canvas id="canvas"></canvas> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				auth: {},

				codeSrc: '',

				auth_image: '',
				icon_1: 'https://qiniu-cdn.maeiyun.com/imgs/technician/index/logo.png',
				icon_2: 'https://qiniu-cdn.maeiyun.com/imgs/technician/index/pageindex_icon.png',
				
				homePage:'',
			}
		},
		methods: {
			lookhomePage() {
				if(Array.isArray(this.auth.auth_image)){
					return this.$util.msg('请先上传实人认证')
				}
				if(!this.auth.person_images.length){
					return this.$util.msg('请先上传个人相册')
				}
				this.$util.toUrl('/technician/proview/proview')
			},
			getBase64(url, key) {
				uni.getImageInfo({
					src: url,
					success: file => {
						pathToBase64(file.path).then(base64 => {
							// console.log(base64)
							this[key] = base64
						}).catch(error => {
							// console.error(error)
						})
					}
				})
			},
			goback() {
				uni.navigateBack()
			},
			receiveRenderData(val) {
				uni.showLoading({
					title: '海报生成中，请耐心等待'
				})
				base64ToPath(val)
					.then(path => {
						uni.hideLoading()
						uni.share({
							provider: 'weixin',
							type: 2,
							scene: 'WXSceneSession',
							imageUrl: path,
							success: res => {
								this.$util.msg('分享成功')
							}
						})
					})
					.catch(error => {
						// console.error(error)
					})
			},
			getQrcode() {
				this.request.httpTokenRequest({
					url: "technician.technician/getTechnicianHome",
					method: "get"
				}).then(res => {
					if (res.code == 0) {
						this.codeSrc = res.data.qr
						this.homePage = res.data.homepage_image
					} else {
						this.$util.msg(res.msg)
					}
				}, error => {})
			},
			onShare() {
				uni.share({
					provider: 'weixin',
					type: 2,
					scene: 'WXSceneSession',
					imageUrl: this.homePage,
					success: res => {
						this.$util.msg('分享成功')
					}
				})
			},
			upDateImg(){
				this.request.httpTokenRequest({
					url: "technician.technician/getTechnicianHome",
					method: "get"
				},{
					reCreate:1
				}).then(res => {
					if (res.code == 0) {
						this.codeSrc = res.data.qr
						this.homePage = res.data.homepage_image
					} else {
						this.$util.msg(res.msg)
					}
				}, error => {})
			},
		},

		onLoad() {
			this.getQrcode()
			this.auth = uni.getStorageSync('authInfo')
		}
	}
</script>

<style lang="scss" scoped>
	#canvas {
		width: 0;
		height: 0;
	}
	@keyframes identifier {
		0% {
			transform: translateX(0);
		}
		
		100% {
			transform: translateX(690rpx)
		}
	}
	#flexGird {
		width: 690rpx;
		height: 1076rpx;
		image {
			width: 690rpx;
			height: 1076rpx;
		}
		
		.skeleton {
			width: 690rpx;
			height: 1076rpx;
			background: #f1f2f4;
			border-radius: 20rpx;
			display: flex;
			text {
				width: 0;
				height: 100%;
				box-shadow: 0 0 30px 4rpx rgba(0, 0, 0, .2);
				animation: identifier 0.6s linear infinite;
			}
		}
	}
	.skeleton {
		
	}
	.nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		padding-top: var(--status-bar-height);
		background: #F5F7F8;
	}

	.content {
		min-height: 100vh;
		box-sizing: border-box;
		padding: calc(var(--status-bar-height) + 44px) 30rpx 20rpx;
	}

	.header {
		background: #FFF;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;

		image {
			width: 100%;
			border-radius: 20rpx;
		}
	}

	.detail {
		background: #FFF;
		padding: 30rpx;

		.name {
			.user {
				font-size: 30rpx;
				color: #08090A;
				line-height: 42rpx;
			}

			.logo {
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
				}

				text {
					font-size: 30rpx;
					color: #08090A;
					line-height: 42rpx;
					margin-left: 10rpx;
				}
			}
		}

		.cer {
			align-items: center;
			margin: 19rpx 0 26rpx;

			image {
				width: 24rpx;
				height: 22rpx;
			}

			text {
				font-size: 22rpx;
				color: #6E4E37;
				line-height: 30rpx;
				margin-left: 11rpx;
			}
		}

		.code {
			align-items: center;

			image {
				width: 165rpx;
				height: 165rpx;
			}

			view {
				margin-left: 23rpx;

				p {
					font-size: 24rpx;
					color: #898989;
					line-height: 33rpx;
				}
			}
		}
	}

	.btnbox {
		background: url(https://qiniu-cdn.maeiyun.com/imgs/technician/index/pageindex_btn.png) 0 0 no-repeat;
		background-size: 100%;
		height: 84rpx;
		margin-top: 30rpx;
		box-sizing: border-box;

		.btn {
			width: 50%;
			height: 100%;
			font-size: 30rpx;
			line-height: 80rpx;
			text-align: center;
		}

		.btn1 {
			color: #2F7CFC;
		}

		.btn2 {
			color: #FFFFFF;
		}
	}
</style>